<template>
  <div class="home">
    <!--不使用辅助函数时在页面中使用vuex数据的写法-->
    {{$store.state.name}} - {{$store.state.age}} - {{$store.state.tel}}
    <!--使用辅助函数的写法-->
    <div>
      {{name}} - {{age}} - {{tel}}
    </div>
    <!--不适用辅助函数时 使用vuex中getter数据的方法-->
    {{$store.getters.userDetail}}
    <!--使用辅助函数后-->
    <div>
      {{userDetail}}
    </div>
    <button @click="changeName('李四')">点击修改用户名称</button>
    <button @click="getData">点击获取异步数据</button>
  </div>
</template>

<script>
// 如果要使用vuex的辅助函数 不能在setup中使用 用法和vue2中的用法相同
// 所有的辅助函数的作用都是将vuex中的属性或者方法拿入对应的组件中 方便在组件中使用的
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Home',
  computed: { 
    // mapState方法需要在computed计算属性中使用 作用是可以将vuex的state中的数据写入当前组件的实例中
    ...mapState(['name', 'age', 'tel']),
    //mapGetters 方法也需要在computed计算属性中使用 作用是将vuex的getters中的方法写入到当前组件的实例中
    ...mapGetters(['userDetail'])
  },

  // created() {
  //   console.log(this)
  // }
  methods: { // 写vue的函数和方法的对象 
  
    // 因为mutation是需要我们调用的函数 所以需要写在methods中
    ...mapMutations(['changeName']),
    // 因为Action也是需要我们手动调用的函数 所以mapActions也需要在methods中使用
    ...mapActions(['getData'])

  }
}
</script>
